<template>
	<view class="createAddress">
		<comHead :title="$t('grzx.xzdz')" :isLeft="true" :isRight="false"></comHead>
		<view class="list">
			<view class="name">
				<label>{{$t('grzx.shr')}}</label>
				<input v-model="listData.name" type="text" :placeholder="$t('grzx.txsjrm')" />
			</view>
			<view class="mobile">
				<label>{{$t('grzx.sjhm')}}</label>
				<picker :range="areaList" :value="index" @change="pickerChange">
					<view class="area-item">{{areaList[index]}}</view>
				</picker>
				<input v-model="listData.mobile" type="text" :placeholder="$t('grzx.qtxshrsjh')" />
			</view>
			<view class="area">
				<label>{{$t('grzx.szdq')}}</label>
				<input v-model="listData.area" type="text" :placeholder="$t('grzx.ssqxs')" />
				<view class="dw" @click="getMapLocation">
					<image src="https://siha.vxmeng.com/static/my/dw.png" mode="widthFix"></image>
					<text>{{$t('grzx.dw')}}</text>
				</view>
			</view>
			<view class="address">
				<label>{{$t('grzx.xxdz')}}</label>
				<input v-model="listData.address" type="text" :placeholder="$t('grzx.jdlp')" />
			</view>
		</view>

		<view class="info">
			<textarea :value="text" :placeholder="$t('grzx.ssztsjr')" cols="30" rows="1"></textarea>
		</view>

		<view class="btn" @click="saveAddress">{{$t('grzx.bcdz')}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: {
					name: "",
					mobile: "",
					// province: "",
					// city:"",
					area: "",
					address: "",
					type: "2"
				},
				name: '',
				mobile: '',
				area: '',
				address: '',
				text: '',
				index: 0,
				areaList: [
					"+86",
					"+1",
					"+61",
					"+44",
					"+33",
					"+49",
					"+81",
					"+91",
					"+82",
					"+65",
					"+60",
					"+34",
					"+39",
					"+55",
					"+54",
					"+52",
					"+27",
					"+234",
					"+966"
				]
			}
		},
		methods: {
			getMapLocation() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.listData.area = res.address
						this.listData.address = res.name
						// this.getRegionFn(res);
					},
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: "是否授权当前位置",
										content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success: (tip) => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: (data) => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data.authSetting['scope.userLocation'] === true) {
															uni.showToast({
																title: "授权成功",
																icon: "success",
																duration: 1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (res) => {
																	console.log("详细地址",res);
																	// this.getRegionFn(res);
																	this.listData.area = res.address
																	this.listData.address = res.name
																}
															})
														} else {
															uni.showToast({
																title: "授权失败",
																icon: "none",
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title: "调用授权窗口失败",
									icon: "none",
									duration: 1000
								})
							}
						})
					}
				});
			},

			pickerChange(e) {
				this.index = e.detail.value
			},

			async saveAddress() {
				const reg = /^1[3-9]\d{9}$/;
				if (!reg.test(this.listData.mobile)) {
					this.$music.play_error()
					this.$tools.showTx(this.$t('grzx.qsrzqdsjh'))
					return
				}
				const res = await this.$myRequest({
					url: 'api/address/addUserAddress',
					data: this.listData
				})
				if (res.code == 1) {
					console.log(res)
					this.$tools.showTx(res.msg)
					this.$tools.toBack()
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.createAddress {
		min-height: 100vh;
		.list {
			box-sizing: border-box;
			width: 690rpx;
			border-radius: 20rpx;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 0 30rpx;
			background: linear-gradient(to right bottom, rgba(28, 25, 28), rgba(18, 18, 30));

			&>view {
				border-top: 1rpx solid rgba(#FFFFFF, 0.1);
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&:nth-child(1) {
					border: none;
				}

				label {
					padding: 30rpx 0;
					width: 160rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					color: #fff;
				}

				input {
					flex: 1;
					font-size: 24rpx;
					color: #fff;
				}

				.dw {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #fff;

					image {
						width: 28rpx;
						margin-right: 14rpx;
					}
				}

				.area-item {
					width: 80rpx;
					height: 30rpx;
					color: #fff;
					font-size: 24rpx;
					line-height: 30rpx;
					margin-right: 10rpx;
					position: relative;

					&::after {
						content: '';
						width: 0;
						height: 0;
						border: 10rpx solid transparent;
						border-top-color: #fff;
						position: absolute;
						top: 10rpx;
						right: 0;
					}
				}
			}
		}

		.info {
			width: 690rpx;
			height: 200rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			width: 690rpx;
			margin: 50rpx auto;
			background: linear-gradient(to right bottom, rgba(28, 25, 28), rgba(18, 18, 30));

			textarea {
				width: 100%;
				height: 100%;
				padding: 30rpx 15rpx;
				font-size: 24rpx;
				box-sizing: border-box;
			}
		}

		.btn {
			width: 560rpx;
			height: 80rpx;
			margin: 100rpx auto 0;
			background: linear-gradient(102deg, #00A6FE 20%, #854EFF 85%);
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			border-radius: 40rpx;
		}
	}
</style>